﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div id="userListTable" class="main-content">
    <h3 class="page-title">用户列表User list</h3>
    <!-- TABLE  -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <p class="panel-title">条件查询Condition query</p>
            <div class="right">
                <button type="button" class="btn-toggle-collapse"><i class="fa fa-angle-up"></i></button>
            </div>
        </div>
        <div class="panel-body row">
            <div class="col-sm-6 input-group input-group-sm">
                <span class="input-group-addon">用户信息User information</span>
                <input type="text" class="form-control" placeholder="请输入用户名/邮件/电话Please enter user name / email / phone" v-model="queryString" v-on:keyup.enter="SearchUser">
                <span class="input-group-btn">
                    <button class="btn btn-default" v-on:click="SearchUser">
                        <i class="fa fa-search"></i> 查询query
                    </button>
                </span>
            </div>
        </div>
    </div>

    <div class="panel">
        <div class="panel-body">
            <button class="btn btn-primary" v-on:click="AddUser">o 
                <i class="fa fa-user-plus"></i> 新增用户New user
            </button>
            <br />
            <br />
            <table class="table table-striped" v-if="isNotEmptyObject(pageModel.results)">
                <thead>
                    <tr>
                        <td colspan="6">
                            <div class="form-inline text-right">
                                <label class="control-label">每页记录数Records per page：</label>
                                <select class="form-control input-sm" style="width:auto;" v-model="pageModel.pageSize">
                                    <option value="10">10条 Article 10</option>
                                    <option value="30">30条 Article 30</option>
                                    <option value="50">50条 Article 50</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>ID <a href="#" v-on:click="ChangeOrderById($event)"><i class="fa fa-angle-up"></i></a></th>
                        <th>用户名user name<a href="#" v-on:click="ChangeOrderByName($event)"><i class="fa fa-angle-up"></i></a></th>
                        <th>中文名Chinese name</th>
                        <th>邮箱mailbox</th>
                        <th>电话Telephone</th>
                        <th>操作operation</th>
                    </tr>
                </thead>
                <tbody v-for="(user, index) in pageModel.results">
                    <tr>
                        <td>{{user.ID}}</td>
                        <td>{{user.Name}}</td>
                        <td>{{user.NameChs}}</td>
                        <td>{{user.Email}}</td>
                        <td>{{user.Mobile}}</td>
                        <td>
                            <button type="button" class="btn btn-info btn-xs" v-on:click="EditUser(user.ID)">
                                <i class="fa fa-edit"></i> 编辑edit
                            </button>
                            <button type="button" class="btn btn-danger btn-xs" v-on:click="DeleteUser(user.ID, user.Name)">
                                <i class="fa fa-remove"></i> 删除delete
                            </button>
                        </td>
                    </tr>
                </tbody>
                <tbody>
                    <tr>
                        <td colspan="6">
                            <nav class="text-right" aria-label="Page navigation">
                                <ul class="pagination">
                                    <li v-if="pageModel.pageIdx > 1">
                                        <a href="#" aria-label="Previous" v-on:click="GotoPage(pageModel.pageIdx - 1)">
                                            <span aria-hidden="true">
                                                <i class="fa fa-angle-left"></i> 上一页previous page
                                            </span>
                                        </a>
                                    </li>
                                    <li v-if="pageModel.pageIdx != 1">
                                        <a href="#" v-on:click="GotoPage(1)">
                                            <i class="fa fa-step-backward"></i>
                                        </a>
                                    </li>
                                    <template v-for="idx in pageModel.pageLength">
                                        <li v-if="pageModel.pageIdx - idx > -5 && pageModel.pageIdx - idx < 5 " v-bind:class="pageModel.pageIdx == idx ? 'active' : ''">
                                            <a href="#" v-on:click="GotoPage(idx)">{{idx}}</a>
                                        </li>
                                    </template>
                                    <li v-if="pageModel.pageIdx != pageModel.pageLength">
                                        <a href="#" v-on:click="GotoPage(pageModel.pageLength)">
                                            <i class="fa fa-step-forward"></i>
                                        </a>
                                    </li>
                                    <li v-if="pageModel.pageIdx < pageModel.pageLength">
                                        <a href="#" aria-label="Next" v-on:click="GotoPage(pageModel.pageIdx + 1)">
                                            <span aria-hidden="true">
                                                下一页next page <i class="fa fa-angle-right"></i>
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- END TABLE -->
</div>


@section scripts{
    <script type="text/javascript" src="~/Scripts/pageJs/Account/Index.js?v=@DateTime.Now.ToFileTimeUtc()"></script>
}
